<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>医生登录</title>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/common.css" rel="stylesheet"/>
    <style type="text/css">
        .mui-content{
        	margin-top: 12px;
        	height: calc(100% - 57px);
        	background-color: #F9F9F9;
        }
        .mui-btn{
            width: 90%;
            padding: 10px 12px;
            border-radius: 10px;
            color: #8cb33e;
            background-color: #FFF;
        }

        .mui-btn-blue:active {
			color: #fff;
			border: 1px solid #8cb33e!important;
			background-color: #8cb33e!important;
		}
        html,body{
        	height: 100%;
        	background-color: #F9F9F9;
        }
        body{
        	/*margin-top: 45px;*/
        	height: calc(100% - 44px);
        	font-family: "微软雅黑","黑体","宋体",sans-serif !important;
        }

        .box-logo{
            width: 100%;
            display: flex;
            height: 45%;
            justify-content:center;
            flex-wrap:wrap;
        }
        .box-logo .logo{
            width: 60%;
            height: 60%;
            margin: auto;
            text-align: center;
            /*background-color:#FFF;*/
        }

        .text-font{
        	font-size: 14px;
        	color: #999;
        }

        .mui-input-row label{
            font-size: 14px;
            width: 22%;
        }

        .mui-input-row label~input{
            width: 78%;
            color: #aab2bd;
            font-size: 14px;
            text-align: left;
        }
        .mui-input-group:before {
        	background-color: #fff;
        	height: 0;
        }
        .mui-input-group:after{
        	background-color: #fff;
        	height: 0;
        }
        .mui-input-group .mui-input-row:after{
        	background-color: #CCC;
        	left: 0
        }
        .mui-input-group .mui-input-row:last-child:after{
        	height: 0;
        }

        .mui-title{
            color: #8cb33e;
        }

        a:active {color:#8cb33e;}

    </style>
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">医生登录</h1>
    </header>
    <div class="mui-content">
    	<div class="box-logo">
    		<div class="logo">
                <img style="height: 100px;" src="https://is1-ssl.mzstatic.com/image/thumb/Purple128/v4/78/4c/0e/784c0e8f-1c14-b09c-5977-04ebf5eea189/AppIcon-1x_U007emarketing-85-220-4.png/246x0w.jpg">
                <h3 style="font-size: 16px;margin-top: 10px;">楚天名医</h3>
                <p style="font-size: 12px;color: #C0C0C0;">名医为您保驾护航</p>
            </div>
    	</div>
        <form class="mui-input-group">
            <div class="mui-input-row">
                <label class="text-font14">手机号</label>
                <input type="text" class="mui-input-clear" placeholder="" id="username">
            </div>
            <div class="mui-input-row">
                <label class="text-font14">密&nbsp;&nbsp;&nbsp;码</label>
                <input type="password" class="mui-input-clear" placeholder="" id="password">
            </div>
        </form>
        <div class="mui-content-padded" align="center" style="margin-top: 20px;">
            <button type="button" class="mui-btn mui-btn-blue app-back-color" style="border: 1px solid #8cb33e;" id="login">登录</button>
        </div>
        <div class="mui-content-padded" align="middle" style="margin-top: 20px;">
        	<div style="width: 80%;">
            	<a class="fr text-font">忘记密码</a>
        	</div>
        </div>
    </div>
    <script src="../../js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        // 页面全局变量
        var $ = mui, doc = document;
        $.init({
            preloadPages:[
                {
                    id:  'main',
                    url: '../main/main.html'
                }
            ]
        });
        $.ready(function(){
            var login = doc.getElementById("login");
            login.addEventListener('tap',function(){
                var username = doc.getElementById("username");
                var password = doc.getElementById("password");
                if(!username.value.length){
                    plus.ui.toast("用户名不能为空");
                    return;
                }
                if(!password.value.length){
                    plus.ui.toast("密码不能为空");
                    return;
                }
                if (username.value === 'admin' && password.value === 'admin') {
                    plus.ui.toast("登录成功");
                    mui.openWindow({
                        id: 'main',
                        url: '../main/main.html'
                    });
                } else {
                    plus.ui.toast("账号或密码错误");
                }
            })
        })
    </script>
</body>
</html>